<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>calculator using Materialize</title>

    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--css reset-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
    <!--Import Materialzie-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
    <!--Optimized for mobile-->
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
    <!--Get google Roboto Font-->
    <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300'>
    <link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua" rel="stylesheet">

    <link rel="stylesheet" href="css/style.css">
</head>
<body >
<main>
<div class="container">
    <div class="row">
        <div class="col s12 l4 offset-l4 xl4 offset-xl4">
            <div class="card-panel  blue-grey lighten-3 right-align screen">
                <span class="black-text result">0</span>
            </div>
            <div class="buttons">
                <div class="col s3"><button type="button" class="waves-effect waves-light btn">C</button></div>
                <div class="col s3"><button type="button" class="waves-effect waves-light btn">+/-</button></div>
                <div class="col s3"><button type="button" class="waves-effect waves-light btn">%</button></div>
                <div class="col s3"><button type="button" class="waves-effect waves-light orange accent-3 btn">&divide;</button></div>

                <div class="col s3"><button type="button" class="waves-effect waves-light btn">7</button></div>
                <div class="col s3"><button type="button" class="waves-effect waves-light btn">8</button></div>
                <div class="col s3"><button type="button" class="waves-effect waves-light btn">9</button></div>
                <div class="col s3"><button type="button" class="waves-effect waves-light orange accent-3 btn">*</button></div>

                <div class="col s3"><button type="button" class="waves-effect waves-light btn">4</button></div>
                <div class="col s3"><button type="button" class="waves-effect waves-light btn">5</button></div>
                <div class="col s3"><button type="button" class="waves-effect waves-light btn">6</button></div>
                <div class="col s3"><button type="button" class="waves-effect waves-light orange accent-3 btn">-</button></div>

                <div class="col s3"><button type="button" class="waves-effect waves-light btn">1</button></div>
                <div class="col s3"><button type="button" class="waves-effect waves-light btn">2</button></div>
                <div class="col s3"><button type="button" class="waves-effect waves-light btn">3</button></div>
                <div class="col s3"><button type="button" class="waves-effect waves-light orange accent-3 btn">+</button></div>

                <div class="col s6"><button type="button" class="waves-effect waves-light btn btn-special">0</button></div>
                <div class="col s3"><button type="button" class="waves-effect waves-light btn">.</button></div>
                <div class="col s3"><button type="button" class="waves-effect waves-light orange accent-3 btn">=</button></div>

            </div>
        </div>
    </div>
</div>
</main>
<footer class="footer">
        <div class="card-panel grey lighten-3 center-align">
            <span>Bulid by <a href="https://github.com/maoxiaoke" target="_blank">@maoxiaoke</a>. Based on <a href="http://materializecss.com/" target="_blank">Materialize</a> CSS Framework.</span>
        </div>

</footer>

</body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>